<template>
    <section class="my-banner">
        <!-- <swiper>
            <swiper-slide> <img
                    src="http://127.0.0.1:3000/upload/images/photo-2023-11-13-1699879802768.jpeg" /></swiper-slide>
            <swiper-slide> <img
                    src="http://127.0.0.1:3000/upload/images/photo-2023-11-10-1699586766347.jpeg" /></swiper-slide>
            <swiper-slide><img
                    src="http://127.0.0.1:3000/upload/images/photo-2023-11-10-1699586777948.jpeg" /></swiper-slide>
            <swiper-slide><img
                    src="http://127.0.0.1:3000/upload/images/photo-2023-11-13-1699879780398.png" /></swiper-slide>
        </swiper> -->

        <a-carousel autoplay>
            <div v-for="item in cbanners">
                <a :href="item.href">
                    <img
                    :src="item.src" />
                </a>
            </div>
        </a-carousel>

    </section>
</template>

<script lang="ts" setup>
// import { Swiper, SwiperSlide } from 'swiper/vue';
// import 'swiper/css';

// 自定义属性接收父组件传递的数据
defineProps(['cbanners'])

// defineProps({
//     cbanners: {
//         // type: Array,
//         default: []
//     }
// })



</script>

<style lang="scss">
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}


.my-banner {
    width: 100%;
    margin-top: 10px;
    overflow: hidden;

    img {
        width: 100%;
        border-radius: 5px;
    }
}</style>